CSS-i trigonomeetrilised funktsioonid: matemaatilised paigutuse arvutused dünaamiliste disainide jaoks

CSS, mis on traditsiooniliselt tuntud staatiliste elementide kujundamise poolest, on arenenud, et pakkuda võimsaid tööriistu dünaamiliseks ja reageerivaks veebidisainiks. Nende hulka kuuluvad trigonomeetrilised funktsioonid, mis võimaldavad arendajatel kasutada matemaatilisi põhimõtteid otse oma CSS-is. See artikkel uurib, kuidas kasutada funktsioone `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` ja `atan2()`, et luua keerukaid, dünaamilisi ja matemaatiliselt täpseid paigutusi.

CSS-i trigonomeetriliste funktsioonide mõistmine

Trigonomeetrilised funktsioonid CSS-is võimaldavad teil sooritada nurkadel põhinevaid arvutusi, mille tulemuseks on väärtused, mida saab kasutada erinevate CSS-i omaduste jaoks, nagu `transform`, `width`, `height` ja palju muud. See avab võimalused ringikujuliste paigutuste, keerukate animatsioonide ja reageerivate disainide loomiseks, mis kohanduvad matemaatiliselt erinevate ekraanisuurustega.

Põhifunktsioonid: sin(), cos() ja tan()

Need funktsioonid on trigonomeetriliste arvutuste aluseks:

• `sin(nurk)`: Tagastab nurga siinuse. Nurk tuleb määrata ühikutes nagu `deg` (kraadid), `rad` (radiaanid), `grad` (graadid) või `turn` (pöörete arv). Siinuse väärtused jäävad vahemikku -1 kuni 1.
• `cos(nurk)`: Tagastab nurga koosinuse. Sarnaselt `sin()`-ile tuleb nurk määrata ühikutes. Ka koosinuse väärtused jäävad vahemikku -1 kuni 1.
• `tan(nurk)`: Tagastab nurga tangensi. Nurk on määratud ühikutes. Tangensi väärtused võivad ulatuda negatiivsest lõpmatusest positiivse lõpmatuseni.

Pöördtrigonomeetrilised funktsioonid: asin(), acos(), atan() ja atan2()

Pöördtrigonomeetrilised funktsioonid võimaldavad teil arvutada nurka tuntud suhte alusel:

• `asin(arv)`: Tagastab arvu arkussiinuse (pöördsiinuse). Arv peab olema vahemikus -1 kuni 1. Tulemuseks on nurk radiaanides.
• `acos(arv)`: Tagastab arvu arkuskoosinuse (pöördkoosinuse). Arv peab olema vahemikus -1 kuni 1. Tulemuseks on nurk radiaanides.
• `atan(arv)`: Tagastab arvu arkustangensi (pöördtangensi). Tulemuseks on nurk radiaanides.
• `atan2(y, x)`: Tagastab y/x arkustangensi, kasutades mõlema argumendi märke tulemuse kvadrandi määramiseks. See on ülioluline koordinaatidega tegelemisel õige nurga määramiseks. Tulemuseks on nurk radiaanides.

Praktilised rakendused ja näited

Uurime mitmeid CSS-i trigonomeetriliste funktsioonide praktilisi rakendusi.

1. Ringikujulise paigutuse loomine

Üks levinud kasutusjuhtum on elementide paigutamine ringi. Selle saab saavutada, arvutades iga elemendi asukoha selle indeksi ja elementide koguarvu alusel, kasutades `sin()` ja `cos()` funktsioone x- ja y-koordinaatide määramiseks ringi keskpunkti suhtes.

HTML:

            <div class="circle-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 </div>
            

              
                Copy
              
            
          

CSS:

            .circle-container {
 position: relative;
 width: 200px;
 height: 200px;
 border: 1px solid black;
 border-radius: 50%;
 margin: 50px auto;
}

.item {
 position: absolute;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: lightblue;
 text-align: center;
 line-height: 30px;
}

.circle-container .item:nth-child(1) {
 top: calc(50% + sin(calc(1 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(1 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(2) {
 top: calc(50% + sin(calc(2 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(2 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(3) {
 top: calc(50% + sin(calc(3 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(3 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(4) {
 top: calc(50% + sin(calc(4 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(4 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(5) {
 top: calc(50% + sin(calc(5 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(5 * 360deg / 5)) * 85px - 15px);
}

            

              
                Copy
              
            
          

Selles näites arvutame iga `.item` elemendi asukoha, kasutades `sin()` ja `cos()` funktsioone. Nurk määratakse, jagades 360 kraadi elementide arvuga (5) ja korrutades selle elemendi indeksiga. Tulemuseks saadud `sin()` ja `cos()` väärtusi kasutatakse seejärel `top` ja `left` asukohtade arvutamiseks, paigutades elemendid tõhusalt ringikujuliselt. Väärtus `85px` tähistab ringi raadiust ja `15px` on nihkeks elemendi suuruse võrra.

2. Laineliste animatsioonide loomine

Trigonomeetrilised funktsioonid sobivad suurepäraselt sujuvate, laineliste animatsioonide loomiseks. Saate kasutada `sin()` või `cos()` funktsiooni, et moduleerida elemendi asukohta, läbipaistvust või muid omadusi aja jooksul.

HTML:

            <div class="wave-container">
 <div class="wave-item"></div>
</div>
            

              
                Copy
              
            
          

CSS:

            .wave-container {
 width: 100%;
 height: 100px;
 overflow: hidden;
 position: relative;
}

.wave-item {
 position: absolute;
 width: 200%;
 height: 100%;
 background-color: lightblue;
 animation: wave 5s linear infinite;
}

@keyframes wave {
 0% {
 transform: translateX(0) translateY(calc(sin(0deg) * 20px));
 }
 50% {
 transform: translateX(-50%) translateY(calc(sin(180deg) * 20px));
 }
 100% {
 transform: translateX(-100%) translateY(calc(sin(360deg) * 20px));
 }
}

            

              
                Copy
              
            
          

Selles näites kasutab `wave` animatsioon `sin()` funktsiooni, et arvutada `.wave-item` elemendi vertikaalset asukohta (`translateY`). Animatsiooni edenedes siinuse väärtus muutub, luues sujuva, lainetava efekti. `translateX` tagab pideva lainelise liikumise.

3. Reageerivate kaarte ja kõverate loomine

CSS-i trigonomeetrilisi funktsioone saab kombineerida vaateala ühikutega (nagu `vw` ja `vh`), et luua reageerivaid kaari ja kõveraid, mis kohanduvad erinevate ekraanisuurustega.

HTML:

            <div class="arc-container">
 <div class="arc-element"></div>
</div>
            

              
                Copy
              
            
          

CSS:

            .arc-container {
 width: 100vw;
 height: 50vh;
 position: relative;
 overflow: hidden;
}

.arc-element {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: red;
 left: calc(50vw + cos(var(--angle)) * 40vw - 10px);
 top: calc(50vh + sin(var(--angle)) * 20vh - 10px);
 animation: arc 5s linear infinite;
}

@keyframes arc {
 0% {
 --angle: 0deg;
 }
 100% {
 --angle: 360deg;
 }
}

            

              
                Copy
              
            
          

Selles näites kasutame kohandatud CSS-i omadusi (`--angle`) ja trigonomeetrilisi funktsioone, et paigutada `.arc-element` piki kaart. `left` ja `top` omadused arvutatakse vastavalt `cos()` ja `sin()` alusel, kusjuures nurk muutub aja jooksul läbi `arc` animatsiooni. Vaateala ühikud (`vw` ja `vh`) tagavad, et kaar kohandub proportsionaalselt ekraani suurusega.

4. Kauguste arvutamine `atan2()` abil

`atan2()` suudab määrata kahe punkti vahelise nurga, mis on kasulik efektide loomisel, kus elemendid reageerivad üksteise asukohtadele.

Kujutage ette stsenaariumi, kus teil on kaks elementi ja soovite ühte pöörata nii, et see osutaks alati teise poole:

HTML:

            <div class="container">
 <div class="target">Target</div>
 <div class="pointer">Pointer</div>
</div>
            

              
                Copy
              
            
          

CSS (koos JavaScriptiga):

            .container {
 position: relative;
 width: 300px;
 height: 300px;
 border: 1px solid black;
 margin: 50px auto;
}

.target {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 50px;
 height: 50px;
 background-color: lightcoral;
 text-align: center;
 line-height: 50px;
}

.pointer {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 20px;
 background-color: lightgreen;
 text-align: center;
 line-height: 20px;
 transform-origin: left center; /* Important for correct rotation */
}

            

              
                Copy
              
            
          

JavaScript:

            const target = document.querySelector('.target');
const pointer = document.querySelector('.pointer');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
 const containerRect = container.getBoundingClientRect();
 const targetRect = target.getBoundingClientRect();

 const centerX = containerRect.left + containerRect.width / 2;
 const centerY = containerRect.top + containerRect.height / 2;

 const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

 pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
});

            

              
                Copy
              
            
          

Selles näites kasutatakse JavaScripti hiire koordinaatide saamiseks konteineri suhtes. `Math.atan2()` arvutab nurga konteineri keskpunkti (mis toimib alguspunktina) ja hiire asukoha vahel. Seda nurka kasutatakse seejärel `.pointer` elemendi pööramiseks, tagades, et see osutab alati hiirekursori suunas. `transform-origin: left center;` on ülioluline, et tagada osuti korrektne pöörlemine oma vasaku keskpunkti ümber.

Trigonomeetriliste funktsioonide kasutamise eelised CSS-is

• Dünaamilised ja reageerivad disainid: Looge paigutusi, mis kohanduvad matemaatiliselt erinevate ekraanisuuruste ja resolutsioonidega.
• Keerukad animatsioonid: Genereerige sujuvaid, realistlikke animatsioone laineliste liikumiste ja muude keerukate mustritega.
• Matemaatiline täpsus: Saavutage elementide täpne positsioneerimine ja suuruse määramine trigonomeetriliste arvutuste põhjal.
• Vähendatud JavaScripti sõltuvus: Tehke arvutusi otse CSS-is, vähendades vajadust keeruka JavaScripti koodi järele paigutuse ja animatsiooni jaoks.
• Parem jõudlus: CSS-põhised animatsioonid ja arvutused võivad olla jõudsamad kui JavaScriptil põhinevad alternatiivid, eriti lihtsate teisenduste puhul.

Kaalutlused ja parimad praktikad

• Brauseri ühilduvus: Kuigi trigonomeetrilised funktsioonid on kaasaegsetes brauserites hästi toetatud, on oluline kontrollida ühilduvust ja pakkuda varuvariante vanematele brauseritele. Kaaluge ühilduvuse parandamiseks PostCSS-i teegi kasutamist koos trigonomeetriliste funktsioonide pistikprogrammidega.
• Jõudlus: Keerukad arvutused võivad mõjutada jõudlust, eriti suure hulga elementide või sagedaste värskenduste korral. Optimeerige oma koodi ja kasutage võimaluse korral riistvaralist kiirendust.
• Loetavus: Trigonomeetrilised arvutused võivad muuta CSS-koodi keerukamaks. Kasutage kommentaare ja kirjeldavaid muutujate nimesid loetavuse ja hooldatavuse parandamiseks.
• Testimine: Testige oma disaine põhjalikult erinevates seadmetes ja brauserites, et tagada ühtlane käitumine ja reageerivus.

Kokkuvõte

CSS-i trigonomeetrilised funktsioonid pakuvad võimsat tööriistakomplekti dünaamiliste, reageerivate ja matemaatiliselt täpsete veebidisainide loomiseks. Nende funktsioonide mõistmise ja kasutamisega saavad arendajad avada uusi võimalusi paigutuse, animatsiooni ja interaktiivsete elementide jaoks, parandades oluliselt kasutajakogemust. Alates ringikujulistest paigutustest ja lainelistest animatsioonidest kuni reageerivate kaarte ja elementide positsioneerimiseni on rakendused laiaulatuslikud ja mitmekesised. Kuigi brauseri ühilduvuse, jõudluse ja loetavuse hoolikas kaalumine on hädavajalik, on trigonomeetriliste funktsioonide lisamise eelised teie CSS-i töövoogu vaieldamatud, võimaldades teil luua tõeliselt kaasahaaravaid ja keerukaid veebikogemusi. Kuna CSS areneb edasi, muutub nende tehnikate valdamine veebidisainerite ja -arendajate jaoks üle maailma üha väärtuslikumaks.

Need teadmised võimaldavad luua keerukamaid ja visuaalselt köitvamaid disaine. Uurige neid tehnikaid ja katsetage erinevate parameetritega, et avada CSS-i trigonomeetriliste funktsioonide täielik potentsiaal oma veebiarendusprojektides.